<style lang="scss" scoped>
	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #f5f5f5;
		z-index: 10;
	}

	.top {
		padding: 20rpx 0;
		width: 100%;
	}

	.search {
		width: 690rpx;
		height: 68rpx;
		background: #f4f5f7;
		border: 2rpx solid #f5f5f5;
		border-radius: 46rpx;
		margin: 0rpx auto;
		padding: 20rpx;

		.ipt {
			flex: 1;
		}
	}

	.tab {
		// margin-top: 20rpx;
		padding: 0 20rpx;
		height: 100rpx;
		border-bottom: 1px solid #ccc;

		.actived {
			color: #409EFF;
		}
	}

	.lists {
		// margin-top: 228rpx;
		margin-top: 110rpx;
		.list {
			height: 100rpx;
			padding: 20rpx;
		}

		.actived {
			color: #409EFF;
		}
	}
	.footer{
		width:100%;
		background-color: white;
		position: fixed;
		bottom:0;
		left:0;
		border-top: 1px solid #cccccc;
	}
</style>
<template>
	<view class="content">
		<view class="nav">
			<!-- <view class="top bgwhite">
				<view class="search align-flex">
					<u-icon name="search" color="#666" size="34"></u-icon>
					<input class="ipt p-left20" type="text" v-model="keywords" @input="reset()"
						placeholder="搜索科室名/关键词" />
				</view>
			</view> -->
			<view class="tab align-flex bgwhite">
				<view class="gray m-right20">位置</view>
				<view class="textColor" v-for="item,index in tabarr" :key="index" @click="change(index)"> <span
						:class="index==current-1?'actived':''">{{item.name}}</span> <span
						v-if="index<tabarr.length-1" class="p-left10 p-right10">/</span></view>
			</view>
		</view>
		<view class="lists bgwhite">
			<view class="list between-flex f28" v-for="item,index in list[current]" :key="index"
				@click="choose(item,index)">
				<view class="textColor" :class="index==chooseIndex[current]?'actived':''">{{item.name}}</view>
				<view v-if="item.children">
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view v-else>
					<u-icon v-if="chooseIndex[current]==index" color="#409EFF" name="checkbox-mark"></u-icon>
				</view>
			</view>
			
		</view>
		<view class="space"></view>
		<view class="footer center-flex paddingBottom">
			<view class="lbtn" @click="confirm">确定</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				orignlist: [], //原始列表
				donelist: [], //处理好的列表
				list: [], //显示的列表
				tabarr: [],
				current: 0,
				chooseIndex: [],
				item: {} //最后一级
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			choose(item, index) {
				if (item.hasOwnProperty('children')) {
					this.chooseIndex[this.current] = index
					this.tabarr[this.current] = item

					let index2 = this.current + 1
					this.list[index2] = item.children
					this.current = index2
				} else {
					this.chooseIndex[this.current] = index
					this.item = item
				}
			},
			//点击最后一级时触发该事件
			confirm() {
				var item=this.item
				console.log(item)
				var list = this.tabarr

				var name = [],
					value = []
				list.forEach(item => {
					name.push(item.name)
					value.push(item.id)

				})
				name.push(item.name)
				value.push(item.id)


				uni.$emit('chooseProperty', {
					name: name.join('/'),
					value: item.id,
					id: item.id
				})
				console.log({
					name: name.join('/'),
					value: item.id,
					id: item.id
				})
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				
				if (prevPage.$vm.hasOwnProperty('property')) {
					
					prevPage.$vm.property = {
						name: name.join('/'),
						value: item.id,
						id: item.id
					}
				}
				
				uni.navigateBack({

				})
			},
			change(index) {
				this.current = index
				this.tabarr.splice(index + 1, this.tabarr.length - index - 1)
				this.list.splice(index + 1, this.list.length - index - 1)
				this.chooseIndex.splice(index + 1, this.chooseIndex.length - index - 1)
			},
			getlist() {
				
				var list =uni.getStorageSync('dic').assetsType
				
				this.orignlist = list
				var arr = []
				list.forEach(item => {
					if (!item.parentId) {
						arr.push(item)
					}
				})
				arr.forEach(item => {
					this.arr2tree(list, item)
				})
				this.donelist = list
				// 列表初始化
				this.list[0] = this.donelist
				this.chooseIndex[0] = -1
				console.log(this.list)
				
			},
			arr2tree(arr, father) {
				// 遍历数组，找到当前father的所有子节点
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].parentId == father.id) {
						// 这里是有子节点才需要有children属性（也就是说有children里绝不会为空list）
						if (!father.children) {
							father.children = [];
						}
						var son = arr[i];
						father.children.push(son);
						arr.splice(i, 1); // 删除该节点，当list为空的时候就终止递归
						i--; // 由于删除了i节点，所以下次访问的元素下标应该还是i
					}
				}
				// 再对每一个子节点进行如上操作
				if (father.children) { // 需要先判断有没有子节点
					var childs = father.children;
					for (var i = 0; i < childs.length; i++) {
						this.arr2tree(arr, childs[i]); // 调用递归函数
					}
					// 用于按名称进行排序，如果不强调顺序可以去掉
					father.children.sort(function(a, b) {
						return a.name > b.name;
					})
				}
			},

		}
	}
</script>
